<template>
  <div class="build">
    <imglist ref="imglist" @change="handleSetimg" :project-id="visual.projectId" :visual-id="visual.id" ></imglist>
    <headers></headers>
    <top ref="top"></top>
    <div class="app"
         :class="{'app--none':!menuFlag}">
      <div class="menu"
           v-show="menuFlag&&menuShow"
           @click.self="handleMouseDown">
        <p class="title">图层</p>
        <layer ref="layer"
               :nav="nav"></layer>
      </div>
      <!-- 中间区域 -->
      <div ref="section"
           class="section">
        <div class="refer-line-img"
             @click="imgClick">
          <img :src="isShowReferLine?imgOpenData:imgClose">
        </div>
        <sketch-rule :thick="thick"
                     :scale="scale"
                     :width="width"
                     :height="height"
                     :startX="startX"
                     :startY="startY"
                     :isShowReferLine="isShowReferLine"
                     :palette="palette"
                     :shadow="shadow"
                     :horLineArr="lines.h"
                     :verLineArr="lines.v" />
        <div ref='screensRef'
             id="screens"
             :class="dragSlide?'dragghanle':''"
             @mousedown.stop="dragMousedown"
             @mouseup="dragMouseup"
             @mousemove="dragMousemove"
             @wheel="handleWheel"
             @keyup.delete="handleDel"
             @scroll="handleScroll">
          <div ref="containerRef"
               class="screen-container">
            <div class="canvas" ref="canvas" :style="canvasStyle">
              <container ref="container" :scale="scale"/>
            </div>
          </div>
        </div>
      </div>
      <div class="menu params"
           v-show="menuFlag&&paramsShow">
        <p class="title">操作</p>
        <el-tabs class="tabs"
                 stretch
                 v-model="tabsActive">
          <el-tab-pane name="0">
            <el-tooltip slot="label"
                        effect="dark"
                        content="配置"
                        placement="top">
              <div><i class="el-icon-setting"></i></div>
            </el-tooltip>
            <el-form label-width="120px"
                     label-position="left"
                     size="mini">
              <!-- 组件配置 -->
              <template v-if="!vaildProp('',[undefined])">
                <p class="title">{{activeObj.title}}</p>
                <el-form-item label="图层名称">
                  <avue-input v-model="activeObj.name"></avue-input>
                </el-form-item>
                <el-form-item label="隐藏">
                  <avue-switch v-model="activeObj.display"></avue-switch>
                </el-form-item>
                <template v-if="vaildProp('colorList')">
                  <el-form-item label="系统配色">
                    <avue-switch v-model="activeOption.switchTheme"></avue-switch>
                  </el-form-item>
                  <el-form-item label="配色选择"
                                v-if="activeOption.switchTheme">
                    <avue-select v-model="activeObj.theme"
                                 :dic="dicOption.themeList">
                    </avue-select>
                  </el-form-item>
                </template>
                <component :is="activeComponent.prop+'Option'"></component>
                <main-option></main-option>
              </template>
              <!-- 多选配置选项 -->
              <template v-else-if="isSelectActive">
                <el-form-item label="水平方式">
                  <el-tooltip content="左对齐"
                              placement="top">
                    <i class="el-icon-s-fold icon"
                       @click="$refs.container.handlePostionSelect('left')"></i>
                  </el-tooltip>
                  <el-tooltip content="居中对齐"
                              placement="top">
                    <i class="el-icon-s-operation icon"
                       @click="$refs.container.handlePostionSelect('center')"></i>
                  </el-tooltip>
                  <el-tooltip content="右对齐"
                              placement="top">
                    <i class="el-icon-s-unfold icon"
                       @click="$refs.container.handlePostionSelect('right')"></i>
                  </el-tooltip>
                </el-form-item>
                <el-form-item label="垂直方式">
                  <el-tooltip content="顶对齐"
                              placement="top">
                    <i class="el-icon-s-fold icon"
                       @click="$refs.container.handlePostionSelect('top')"></i>
                  </el-tooltip>
                  <el-tooltip content="中部对齐"
                              placement="top">
                    <i class="el-icon-s-operation icon"
                       @click="$refs.container.handlePostionSelect('middle')"></i>
                  </el-tooltip>
                  <el-tooltip content="底对齐"
                              placement="top">
                    <i class="el-icon-s-unfold icon"
                       @click="$refs.container.handlePostionSelect('bottom')"></i>
                  </el-tooltip>
                </el-form-item>
                <el-form-item label-width="0">
                  <el-button type="primary"
                             size="mini"
                             class="block"
                             @click="handleFloder">成组</el-button>
                </el-form-item>
                <el-form-item label-width="0">
                  <el-button type="danger"
                             size="mini"
                             class="block"
                             @click="handleDeleteSelect">删除</el-button>
                </el-form-item>
              </template>
              <!-- 主屏的配置项 -->
              <template v-else>
                <el-form-item label="大屏名称">
                  <avue-input v-model="config.name"></avue-input>
                </el-form-item>
                <el-form-item label="大屏宽度">
                  <avue-input-number v-model="config.width"></avue-input-number>
                </el-form-item>
                <el-form-item label="大屏高度">
                  <avue-input-number v-model="config.height"></avue-input-number>
                </el-form-item>
                <el-form-item label="大屏简介">
                  <avue-input v-model="config.info"
                              type="textarea"
                              :min-rows="5"></avue-input>
                </el-form-item>
                <el-form-item label="背景颜色">
                  <avue-input-color v-model="config.backgroundColor"></avue-input-color>
                </el-form-item>
                <el-form-item label="背景图片">
                  <img :src="config.backgroundImage"
                       @click="handleOpenImg('config.backgroundImage','background')"
                       alt=""
                       width="100%" />
                  <i class="el-icon-delete" style="cursor: pointer" v-if="config.backgroundImage !== '/img/bg/bg.png'" title="移除背景" @click="config.backgroundImage = '/img/bg/bg.png'"></i>
                </el-form-item>
                <el-form-item label="公共地址">
                  <avue-input type="textarea"
                              :min-rows="3"
                              v-model="config.url"></avue-input>
                </el-form-item>
                <el-form-item label="公共请求参数">
                  <el-button size="mini"
                             type="primary"
                             @click="openCode('query')">编辑函数</el-button>
                </el-form-item>
                <el-form-item label="公共请求头">
                  <el-button size="mini"
                             type="primary"
                             @click="openCode('header')">编辑函数</el-button>
                </el-form-item>
                <el-form-item label="水印(预览有效)">
                  <avue-switch v-model="config.mark.show"></avue-switch>
                </el-form-item>
                <template v-if="config.mark.show">
                  <el-form-item label="内容">
                    <avue-input v-model="config.mark.text"></avue-input>
                  </el-form-item>
                  <el-form-item label="大小">
                    <avue-input-number v-model="config.mark.fontSize"></avue-input-number>
                  </el-form-item>
                  <el-form-item label="颜色">
                    <avue-input-color v-model="config.mark.color"></avue-input-color>
                  </el-form-item>
                  <el-form-item label="角度">
                    <avue-input-number v-model="config.mark.degree"></avue-input-number>
                  </el-form-item>
                </template>
              </template>
            </el-form>
          </el-tab-pane>
          <!-- 数据配置 -->
          <el-tab-pane name="1"
                       v-if="vaildProp('dataList')">
            <el-tooltip slot="label"
                        effect="dark"
                        content="数据"
                        placement="top">
              <div><i class="el-icon-document-copy"></i></div>
            </el-tooltip>
            <el-form label-width="120px"
                     label-position="left"
                     size="mini">
              <el-form-item label="数据类型">
                <avue-radio v-model="activeObj.dataType"
                            :dic="dicOption.dataType"></avue-radio>
              </el-form-item>
              <el-form-item label="是否定时刷新" v-if="activeObj.dataType===1 || activeObj.dataType === 2">
                <avue-switch v-model="activeObj.timedRefresh"></avue-switch>
              </el-form-item>
              <el-form-item label="刷新时间(ms)" v-if="(activeObj.dataType===1 || activeObj.dataType === 2) && activeObj.timedRefresh">
                <avue-input-number v-model="activeObj.time"></avue-input-number>
              </el-form-item>
              <template v-if="isApi || isSql || isSocket">
                <el-form-item label-width="0">
                  <el-button size="mini"
                             type="primary"
                             class="block"
                             @click="handleSql">
                    <span v-if="isSql">编辑SQL语句</span>
                    <span v-else-if="isApi">编辑Api接口</span>
                    <span v-else-if="isSocket">编辑Socket接口</span>
                  </el-button>
                </el-form-item>
              </template>
              <el-form-item label-width="0"
                            v-if="isStatic">
                <el-button size="mini"
                           type="primary"
                           class="block"
                           @click="handleSql">
                  <span>编辑静态数据</span>
                </el-button>
              </el-form-item>
              <el-form-item label-width="0">
                <el-button size="mini"
                           type="primary"
                           class="block"
                           @click="openCode('stylesFormatter')">编辑样式</el-button>
              </el-form-item>
              <el-form-item label-width="0">
                <el-button size="mini"
                           type="primary"
                           class="block"
                           @click="handleRes">刷新数据</el-button>
              </el-form-item>
            </el-form>

          </el-tab-pane>
          <!-- 交互事件配置 -->
          <!-- 交互事件配置 -->
          <el-tab-pane name="2"
                       v-if="vaildProp('eventList')">
            <el-tooltip slot="label"
                        effect="dark"
                        content="交互"
                        placement="top">
              <div><i class="el-icon-thumb"></i></div>
            </el-tooltip>
            <el-form label-width="120px"
                     label-position="left"
                     size="mini">
              <el-form-item label="子类">
                <avue-select multiple
                             v-model="activeObj.child.index"
                             :dic="childList"
                             :props="childProps">
                </avue-select>
              </el-form-item>
              <el-form-item label="参数名称">
                <avue-input v-model="activeObj.child.paramName"></avue-input>
              </el-form-item>
              <el-form-item v-if="vaildProp('eventValue')" label="参数值">
                <avue-input v-model="activeObj.child.paramValue"></avue-input>
              </el-form-item>
              <el-form-item v-if="vaildProp('eventFilter')" label="参数值过滤器">
                <el-button size="mini"
                           type="primary"
                           @click="openCode('eventFormatter')">编辑</el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <!-- 其他事件配置 -->
          <el-tab-pane name="3"
                       v-if="!vaildProp('',[undefined])">
            <el-tooltip slot="label"
                        effect="dark"
                        content="事件"
                        placement="top">
              <div><i class="iconfont icon-peizhi"></i></div>
            </el-tooltip>
            <el-form label-width="120px"
                     label-position="left"
                     size="mini">
              <el-form-item label="点击事件">
                <el-button size="mini"
                           type="primary"
                           @click="openCode('clickFormatter')">编辑</el-button>
              </el-form-item>
              <el-form-item label="提示事件"
                            v-if="vaildProp('labelFormatterList')">
                <el-button size="mini"
                           type="primary"
                           @click="openCode('formatter')">编辑</el-button>
              </el-form-item>
              <el-form-item label="标题事件"
                            v-if="vaildProp('labelFormatterList')">
                <el-button size="mini"
                           type="primary"
                           @click="openCode('labelFormatter')">编辑</el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <!-- 基本参数配置 -->
          <el-tab-pane name="4"
                       v-if="isActive">
            <el-tooltip slot="label"
                        effect="dark"
                        content="参数"
                        placement="top">
              <div><i class="el-icon-folder"></i></div>
            </el-tooltip>
            <el-form label-width="120px"
                     label-position="left"
                     size="mini">
              <el-form-item label="序号">
                <avue-input v-model="activeObj.index"
                            disabled></avue-input>
              </el-form-item>
              <el-form-item label="X位置">
                <avue-input-number v-model="activeObj.left"></avue-input-number>
              </el-form-item>
              <el-form-item label="Y位置">
                <avue-input-number v-model="activeObj.top"></avue-input-number>
              </el-form-item>
              <el-form-item label="宽度">
                <avue-input-number v-model="activeComponent.width"></avue-input-number>
              </el-form-item>
              <el-form-item label="高度">
                <avue-input-number v-model="activeComponent.height"></avue-input-number>
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <codeedit @submit="codeClose"
              v-if="code.box"
              :type="code.type"
              v-model="code.obj"
              :visible.sync="code.box"></codeedit>
    <contentmenu ref="contentmenu"></contentmenu>
    <el-dialog append-to-body
               :close-on-click-modal="false"
               :visible.sync="show"
               width="60%">
      <el-form size="small"
               v-if="show"
               label-width="130px">
        <template v-if="isStatic">
          <el-form-item label="数据值"
                        label-position="top">
            <el-button size="mini"
                       type="primary"
                       @click="openCode('data')">编辑JSON</el-button>
          </el-form-item>
        </template>
        <template v-else-if="isSql">
          <el-form-item label="数据源选择">
            <avue-select :dic="DIC.sql"
                         v-model="db"></avue-select>
          </el-form-item>
          <el-form-item label="SQL语句"
                        label-position="top">
            <monaco-editor v-model="sql"
                           language="sql"
                           height="100"></monaco-editor>
          </el-form-item>
          <el-form-item label="参数设置">
            <avue-crud :option="sqlOption"
                       :data="sqlParams"
                       @row-save="paramsSave"
                       @row-del="paramsDel"
                       @row-update="paramsUpdate"/>
          </el-form-item>
        </template>
        <template v-else-if="isApi">
          <el-form-item label="接口地址">
            <avue-input v-model="activeObj.url"></avue-input>
          </el-form-item>
          <el-form-item label="后端代理">
            <avue-switch v-model="activeObj.proxy">
            </avue-switch>
          </el-form-item>
          <el-form-item label="请求方式">
            <avue-select v-model="activeObj.dataMethod"
                         :dic="dicOption.dataMethod"></avue-select>
          </el-form-item>
          <el-form-item label="请求头">
            <el-button size="small"
                       type="primary"
                       @click="openCode('dataHeader')">编辑函数</el-button>
          </el-form-item>
          <el-form-item label="请求参数">
            <el-button size="small"
                       type="primary"
                       @click="openCode('dataQuery')">编辑函数</el-button>
          </el-form-item>
        </template>
        <template v-else-if="isSocket">
          <el-form-item label="ws接口地址">
            <avue-input v-model="activeObj.wsUrl"></avue-input>
          </el-form-item>
          <el-form-item label="Topic">
            <avue-input v-model="activeObj.wsTopic"></avue-input>
          </el-form-item>
          <el-form-item label="请求头">
            <el-button size="small"
                       type="primary"
                       @click="openCode('dataHeader')">编辑函数</el-button>
          </el-form-item>
          <el-form-item label="请求参数">
            <el-button size="small"
                       type="primary"
                       @click="openCode('dataQuery')">编辑函数</el-button>
          </el-form-item>
        </template>
        <el-form-item label="响应数据">
          <monaco-editor v-model="dataRes"
                         disabled
                         height="300"></monaco-editor>
        </el-form-item>
      </el-form>
      <span slot="footer"
            class="dialog-footer">
        <el-button size="small"
                   type="danger"
                   @click="openCode('dataFormatter')">数据处理</el-button>
        <el-button size="small"
                   type="primary"
                   @click="handleRes">刷新数据</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>

import MonacoEditor from '@/page/components/editor'
import layer from './group/layer';
import top from './group/top';
import headers from './group/header';
import imglist from './group/imglist'
import contentmenu from './group/contentmenu'
import codeedit from './group/code';
import {dicOption, sqlOption} from '@/option/config'
import init from '@/mixins/'
import { createFile } from '@/utils/utils'
import components from '@/option/components'
import SketchRule from "vue-sketch-ruler";
import { getList } from "@/api/db";
import crypto from '@/utils/crypto'

export default {
  mixins: [init, components],
  data () {
    return {
      menuShow: true,
      paramsShow: true,
      show: false,
      keys: {
        ctrl: false,
      },
      dataRes: '',
      db: '',
      sql: '',
      sqlParams: [],
      sqlOption: sqlOption,
      nav: [],
      json: {},
      DIC: {
        sql: [],
      },
      loading: '',
      childProps: {
        label: 'name',
        value: 'index'
      },
      key: '',
      menuFlag: true,
      code: {
        box: false,
        type: '',
        obj: '',
      },
      form: {},
      dicOption: dicOption,
      tabsActive: 0,
      // 标尺
      scale: 0.9, //初始化标尺的缩放
      startX: 0, //x轴标尺开始的坐标数值
      startY: 0,
      lines: {   //初始化水平标尺上的参考线
        h: [],
        v: []
      },
      rendIndex: 0,//重新渲染组件
      thick: 20,  //标尺的厚度
      width: 0,  // 标尺宽,后面会初始化
      height: 0,// 标尺高,后面会初始化
      isShowReferLine: true, // 显示参考线
      isImgOpen: true, //眼镜打开
      imgOpenData: '', // 左上角图片
      imgClose: '',
      dragSlide: false,  // 拖动滚动条标记
    }
  },
  components: {
    MonacoEditor,
    imglist,
    layer,
    codeedit,
    top,
    headers,
    contentmenu,
    SketchRule
  },
  computed: {
    isKeysCtrl () {
      return this.keys.ctrl == true
    },
    isStatic () {
      return this.activeObj.dataType === 0
    },
    isApi () {
      return this.activeObj.dataType === 1
    },
    isSql () {
      return this.activeObj.dataType === 2
    },
    isSocket() {
      return this.activeObj.dataType === 3
    },
    isFolder () {
      return this.activeObj.children
    },
    isActive () {
      return this.active.length !== 0
    },
    isSelectActive () {
      return this.active.length > 1;
    },
    childList () {
      return this.list.filter(ele => {
        if (['tabs'].includes(ele.component.prop)) {
          return false;
        }
        return true;
      })
    },
    activeComponent () {
      return this.activeObj.component || {}
    },
    activeOption () {
      return this.activeObj.option || {}
    },
    activeObj () {
      if (this.validatenull(this.activeIndex)) return {}
      let item = this.findlist(this.activeIndex);
      if (!item.child) item.child = {}
      return item
    },
    activeList () {
      let result = []
      this.active.forEach(ele => {
        const item = this.findnav(ele, true);
        result.push(item.obj);
      })
      return result
    },
    /* 标尺用的 */
    palette () {
      return {
        bgColor: '#181b24', // ruler bg color
        longfgColor: '#BABBBC', // ruler longer mark color
        shortfgColor: '#9C9C9C', // ruler shorter mark color
        fontColor: '#fff', // ruler font color
        shadowColor: '#181b24', // ruler shadow color
        // shadowColor: '#fff', // ruler shadow color
        lineColor: '#EB5648',
        borderColor: '#B5B5B5',
        cornerActiveColor: '#fff',
      }
    },
    shadow() {
      return {
        x: 0,
        y: 0,
        width: this.rectWidth,
        height: this.rectHeight
      }
    },
    rectWidth() {
      return Number(this.config.width)
    },
    rectHeight() {
      return Number(this.config.height)
    },
    // 画布大小,一定要是computed里面,否则缩放页面会失效
    canvasStyle () {
      return {
        width: this.rectWidth + 'px',
        height: this.rectHeight + 'px',
        transform: `scale(${this.scale})`
      }
    }
  },
  watch: {
    activeObj: {
      handler (val) {
        if (this.activeObj.sql && this.isSql) {
          let mode = JSON.parse(crypto.decrypt(this.activeObj.sql));
          this.db = mode.id;
          this.sql = mode.sql;
          this.sqlParams = mode.params
        } else {
          this.db = '';
          this.sql = '';
          this.sqlParams = []
        }
      },
      deep: true
    },
    menuFlag () {
      this.resetUnderPainting();
    },
    overactive (n, o) {
      [o, n].forEach((ele, index) => {
        if (!ele) return
        this.setActive(ele, index === 1, 'setOverActive');
      })
    },
    active (n, o) {
      [o, n].forEach((ele, index) => {
        ele.forEach(item => {
          this.setActive(item, index === 1, 'setActive');
        })
      })
      //隐藏右键菜单
      this.$refs.contentmenu.hide();
      // 初始化选项卡
      this.tabsActive = '0';
    },
    visual:{
      handler (val) {
        this.initSqlList(val);
      }
    },
    rectWidth() {
      this.resetUnderPainting()
    },
    rectHeight() {
      this.resetUnderPainting()
    }
  },
  created () {
    this.listen();
    this.iniResize()
    // this.initSqlList();
  },
  mounted () {
    this.initFun()
    this.$nextTick(() => {
      this.resetUnderPainting()
    })
  },
  methods: {
    /**
     * 重置底图
     */
    resetUnderPainting() {
      this.$nextTick(()=> {
        this.resetRulerSize()
        this.resetScale()
        this.initStartValue()
      })
    },
    handleRefresh () {
      return this.$refs.container.handleRefresh();
    },
    handleRes () {
      if (this.isSql) {
        this.$set(this.activeObj, 'sql', crypto.encrypt(JSON.stringify({
          id: this.db,
          sql: this.sql,
          params: this.sqlParams
        })))
      }
      this.handleRefresh().then(res => {
        if (!this.validatenull(res)) {
          this.dataRes = JSON.stringify(res || {}, null, 4);
        } else {
          this.dataRes = '';
        }
        this.$message.success('数据刷新成功')

      })
    },
    handleSql () {
      this.show = true;
      this.dataRes = '';
      this.$nextTick(() => {
        let result = false
        if (this.isSql && !this.validatenull(this.sql)) {
          result = true;
        } else if (this.isApi && !this.validatenull(this.activeObj.url)) {
          result = true;
        } else {
          result = true;
        }
        if (result) this.handleRes()
      })
    },
    initSqlList () {
      getList(1, 100,{
        projectId: this.visual.projectId
      }).then(res => {
        const data = res.data.data;
        this.DIC.sql = data.records.map(ele => {
          return {
            label: ele.name,
            value: ele.id
          }
        })
      });
    },
    codeClose (value) {
      if (this.configData.includes(this.code.type)) {
        this.config[this.code.type] = value;
      } else {
        this.activeObj[this.code.type] = value;
      }
    },
    openCode (type) {
      this.code.type = type;
      if (this.configData.includes(type)) {
        this.code.obj = this.config[type];
      } else {
        this.code.obj = this.activeObj[type];
      }
      this.code.box = true;
    },
    initFun () {
    },
    // 右键菜单
    handleContextMenu (e, item = {}) {
      if (!item.index || this.isKeysCtrl) return
      else if (!this.isSelectActive) {
        this.active = [item.index];
        this.activeIndex = item.index;
      }
      this.$nextTick(() => this.$refs.contentmenu.show(e.clientX, e.clientY))
    },
    //监听键盘的按键
    listen () {
      document.onkeydown = (e) => {
        this.keys.ctrl = e.keyCode === 17;
        if (e.target.nodeName == 'TEXTAREA' || e.target.nodeName == 'INPUT') return;
        // 按下空格键
        if (e.keyCode === 32) {
          e.preventDefault();
          this.keys.space = true
        } else if (e.keyCode === 17) {
          this.keys.ctrl = true
        }
      }
      document.onkeyup = (e) => {
        this.keys.ctrl = false;
        // 松开空格键
        if (e.keyCode === 32) {
          this.keys.space = false
        } else if (e.keyCode === 17) {
          this.keys.ctrl = false
        }
      }
    },
    setActive (val, result, fun) {
      const obj = this.$refs.container.getDragObj(val);
      if (!this.validatenull(obj)) obj[0][fun](result)
    },
    //批量成组
    handleFloder () {
      let floder = createFile()
      this.active.forEach(index => {
        const params = this.findnav(index);
        floder.children.push(params.obj);
        params.parent.splice(params.count, 1);
      })
      this.nav.push(floder);
      this.handleInitActive();
    },
    handleDel () {
      this.$confirm(`是否删除所选图层?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const params = this.findnav(this.active[0], true);
        this.active.forEach(ele => {
          const item = this.findnav(ele, true);
          if (Array.isArray(params.parent)) {
            params.parent.splice(item.count, 1);
          } else {
            params.parent.children.splice(item.count, 1);
          }
        });
        this.handleInitActive();
      }).catch(() => { })
    },
    //批量删除
    handleDeleteSelect () {
      this.$confirm(`是否批量删除所选图层?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.active.forEach(index => {
          const params = this.findnav(index);
          params.parent.splice(params.count, 1);
        })
        this.handleInitActive()
      })
    },
    vaildProp (name, list) {
      if (list) return list.includes(this.activeComponent.prop) || this.active.length > 1;
      return this.dicOption[name].includes(this.activeComponent.prop)
    },
    formatTooltip (val) {
      return parseInt(val);
    },
    //打开图库
    handleOpenImg (item, type) {
      this.$refs.imglist.openImg(item, type);
    },
    //图库框回调赋值
    handleSetimg (val, type) {
      let params = type.split('.')[1];
      if (type.includes('config')) {
        this.config[params] = val;
      } else if (type.includes('activeObj.data.value')) {
        this.activeObj.data.value = val;
      } else if (type.includes('activeObj.data')) {
        this.activeObj.data = val;
      } else if (type.includes('activeObj')) {
        this.activeObj[params] = val;
      } else if (type.includes('activeOption')) {
        this.activeOption[params] = val;
      }
    },
    /* **************************标尺方法开始******************************* */
    // 滚轮触发
    handleScroll () {
      const screensDom = this.$refs.screensRef.getBoundingClientRect();
      const canvasDom = this.$refs.canvas.getBoundingClientRect();
      // 标尺开始的刻度
      const startX = (screensDom.left + this.thick - canvasDom.left) / this.scale;
      const startY = (screensDom.top + this.thick - canvasDom.top) / this.scale;
      this.startX = startX;
      this.startY = startY;
    },
    // 控制缩放值
    handleWheel (e) {
      if (e.ctrlKey || e.metaKey) {
        e.preventDefault();
        const nextScale = parseFloat(
            Math.max(0.2, this.scale - e.deltaY / 500).toFixed(2)
        );
        this.scale = nextScale;
      }
      this.$nextTick(() => {
        this.handleScroll();
      });
    },
    // 初始化标尺数值
    // 重置化标尺数值
    resetRulerSize () {
      const sectionDom = this.$refs.section;
      this.width = sectionDom.clientWidth - this.thick;
      this.height = sectionDom.clientHeight - this.thick;
    },
    // 重置缩放比例
    resetScale() {
      this.scale = this.width * 0.95 / this.rectWidth; // 0.95是canvas占父级容器的百分比宽度
    },
    initStartValue() {
      const canvasDom = this.$refs.canvas;
      const offsetLeft = (this.width / this.scale - this.rectWidth) / 2;
      canvasDom.style.left = `${offsetLeft * this.scale + this.thick}px`;
      this.handleScroll()
    },
    // resize
    iniResize () {
      window.addEventListener('resize', () => {
        this.resetUnderPainting();
        this.rendIndex++;
      })
    },
    // 图片点击事件
    imgClick () {
      this.isShowReferLine = !this.isShowReferLine
    },
    // 鼠标按下事件
    dragMousedown (e) {
      // 如果按下了空格键,且按下鼠标左键,那么鼠标变抓手,开启滚动条随鼠标拖动的操作
      this.handleInitActive()
      if (this.keys.space) {
        this.dragSlide = true
        window.stardragEvent = e
        window.startSlideX = this.$refs.screensRef.scrollLeft
        window.startSlideY = this.$refs.screensRef.scrollTop
      }
    },
    //鼠标抬起操作
    dragMouseup () {
      this.dragSlide = false
    },
    // 鼠标移动骚操作
    dragMousemove (e) {
      if (this.dragSlide) {
        let x = e.clientX - window.stardragEvent.clientX
        let y = e.clientY - window.stardragEvent.clientY
        this.$refs.screensRef.scrollLeft = window.startSlideX - x
        this.$refs.screensRef.scrollTop = window.startSlideY - y
      }
    },
    selectNav (item) {
      if (Array.isArray(item)) {
        this.active = this.active.concat(item)
      } else if (this.isKeysCtrl) {
        this.active.push(item);
      } else if (!this.active.includes(item)) {
        this.active = [item];
        this.activeIndex = item;
      }
    },
    paramsSave (row, done) {
      this.sqlParams.push(row);
      done()
    },
    paramsDel (row, index) {
      this.sqlParams.splice(index, 1);
    },
    paramsUpdate (row, index, done) {
      this.sqlParams.splice(index, 1, row);
      done()
    },
  }
}
</script>
<style lang="scss">
@import "../styles/style.scss";
.refer-line-img {
  position: absolute;
  left: 0;
  z-index: 5;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  img {
    width: 100%;
  }
}
#screens {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: auto;
  &::-webkit-scrollbar-track-piece {
    background: #2d343c;
    border-radius: 20px;
  }
  &::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  &::-webkit-scrollbar-thumb {
    background: #99a9bf;
    border-radius: 20px;
  }
}

.screen-container {
  position: relative;
  width: 4000px;
  height: 2000px;
}

.dragghanle {
  cursor: pointer;
}
.canvas {
  position: absolute;
  top: 60px;
  transform-origin: 0 0;
}
.section {
  flex: 1;
  overflow: hidden;
  position: relative;
}
</style>
